<!-- src/views/equipdetail.vue -->
<template>
  <div class="equip-detail">
    <!-- 返回按钮 -->
    <div class="back-button" @click="goBack">
      <el-icon><ArrowLeft /></el-icon>
      返回
    </div>
    
    <!-- 装备内容 -->
    <div class="equip-content">
      <div class="equip-main">
        <div class="equip-image">
          <img :src="equipDetail.img" :alt="equipDetail.name" v-if="equipDetail.img" />
          <img src="../assets/default_equip.png" :alt="equipDetail.name" v-else />
        </div>
        
        <div class="equip-info">
          <h1>{{ equipDetail.name }}</h1>
          <div class="description">{{ equipDetail.description }}</div>
          <!-- 神装标识 -->
          <div class="god-equip-tag" v-if="isGodEquip">
            <el-tag type="warning" effect="dark">神装</el-tag>
          </div>
        </div>
      </div>
      
      <!-- 合成信息（如果该装备可以合成其他装备，且不是神装） -->
      <div class="equip-composites" v-if="!isGodEquip && compositeEquips.length > 0">
        <h2>可合成装备</h2>
        <div class="composite-list">
          <div 
            class="composite-item" 
            v-for="composite in compositeEquips" 
            :key="composite.compositeInfo?.id || composite.id"
          >
            <div class="composite-equip">
              <img :src="composite.compositeEquip?.img" :alt="composite.compositeEquip?.name" v-if="composite.compositeEquip && composite.compositeEquip.img" />
              <img src="../assets/default_equip.png" :alt="composite.compositeEquip?.name" v-else />
              <div class="composite-equip-info">
                <h3>{{ composite.compositeEquip?.name || '未知装备' }}</h3>
                <p>{{ composite.compositeEquip?.description || '暂无描述' }}</p>
              </div>
            </div>
            <div class="synthesis-info">
              <div class="material">
                <img :src="composite.baseEquip1?.img" :alt="composite.baseEquip1?.name" v-if="composite.baseEquip1 && composite.baseEquip1.img" />
                <img src="../assets/default_equip.png" :alt="composite.baseEquip1?.name" v-else />
                <span>{{ composite.baseEquip1?.name || '未知材料' }}</span>
              </div>
              <div class="plus">+</div>
              <div class="material">
                <img :src="composite.baseEquip2?.img" :alt="composite.baseEquip2?.name" v-if="composite.baseEquip2 && composite.baseEquip2.img" />
                <img src="../assets/default_equip.png" :alt="composite.baseEquip2?.name" v-else />
                <span>{{ composite.baseEquip2?.name || '未知材料' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 合成材料（如果该装备是由其他装备合成，且不是神装） -->
      <div class="equip-materials" v-if="!isGodEquip && equipCompositeInfo && (equipCompositeInfo.baseEquip1 || equipCompositeInfo.baseEquip2)">
        <h2>合成材料</h2>
        <div class="materials-info">
          <div class="material-item" v-if="equipCompositeInfo.baseEquip1">
            <img :src="equipCompositeInfo.baseEquip1.img" :alt="equipCompositeInfo.baseEquip1.name" v-if="equipCompositeInfo.baseEquip1.img" />
            <img src="../assets/default_equip.png" :alt="equipCompositeInfo.baseEquip1.name" v-else />
            <div class="material-details">
              <h3>{{ equipCompositeInfo.baseEquip1.name }}</h3>
              <p>{{ equipCompositeInfo.baseEquip1.description }}</p>
            </div>
          </div>
          <div class="plus">+</div>
          <div class="material-item" v-if="equipCompositeInfo.baseEquip2">
            <img :src="equipCompositeInfo.baseEquip2.img" :alt="equipCompositeInfo.baseEquip2.name" v-if="equipCompositeInfo.baseEquip2.img" />
            <img src="../assets/default_equip.png" :alt="equipCompositeInfo.baseEquip2.name" v-else />
            <div class="material-details">
              <h3>{{ equipCompositeInfo.baseEquip2.name }}</h3>
              <p>{{ equipCompositeInfo.baseEquip2.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 神装提示信息 -->
      <div class="god-equip-info" v-if="isGodEquip">
        <h2>神装说明</h2>
        <p>此装备为神装，无法通过合成获得，通常通过特殊方式获取。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElLoading, ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const equipId = ref(route.query.id)
const equipDetail = ref({})
const equipCompositeInfo = ref(null)
const compositeEquips = ref([])

// 判断是否为神装（根据名称或描述中是否包含"神"字）
const isGodEquip = computed(() => {
  if (!equipDetail.value) return false
  const name = equipDetail.value.name || ''
  const description = equipDetail.value.description || ''
  return name.includes('神') || description.includes('神')
})

// 获取装备详情
const fetchEquipDetail = async () => {
  if (!equipId.value) {
    ElMessage.error('无效的装备ID')
    router.go(-1)
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  
  try {
    // 获取装备基本信息
    const equipResponse = await request({
      url: `/equip/${equipId.value}`,
      method: 'get'
    })
    
    if (equipResponse) {
      equipDetail.value = equipResponse
    } else {
      ElMessage.error('未找到该装备')
      router.go(-1)
      return
    }
    
    // 如果是神装，不需要获取合成信息
    if (isGodEquip.value) {
      loading.close()
      return
    }
    
    // 获取该装备作为合成材料时的信息（可以合成哪些装备）
    try {
      const compositesResponse = await request({
        url: `/equip-composite/search`,
        method: 'get',
        params: { keyword: equipDetail.value.name }
      })
      
      if (compositesResponse) {
        compositeEquips.value = compositesResponse
      } else {
        compositeEquips.value = []
      }
    } catch (error) {
      console.log('该装备无合成信息')
      compositeEquips.value = []
    }
    
    // 获取该装备的合成材料信息（由哪些装备合成）
    try {
      const compositeResponse = await request({
        url: `/equip-composite/${equipId.value}`,
        method: 'get'
      })
      
      if (compositeResponse) {
        equipCompositeInfo.value = compositeResponse
      } else {
        equipCompositeInfo.value = null
      }
    } catch (error) {
      console.log('该装备无合成材料信息')
      equipCompositeInfo.value = null
    }
  } catch (error) {
    console.error('获取装备详情失败', error)
    ElMessage.error('获取装备详情失败: ' + (error.message || '未知错误'))
    router.go(-1)
  } finally {
    loading.close()
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

onMounted(() => {
  fetchEquipDetail()
})
</script>

<style scoped>
.equip-detail {
  position: relative;
  min-height: 100vh;
  color: white;
  padding: 20px;
}

.equip-detail::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../assets/heard(2).png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.3;
  z-index: -1;
}
.back-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  background: rgba(0, 163, 131, 0.8);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background 0.3s;
  z-index: 10;
  position: relative;
}

.back-button:hover {
  background: rgba(0, 163, 131, 1);
}

.equip-content {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 30px;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.equip-main {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #00a383;
}

.equip-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.equip-image img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 3px solid #00a383;
  border-radius: 10px;
}

.equip-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.equip-info h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #00a383;
}

.description {
  white-space: pre-line;
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 18px;
}

.god-equip-tag {
  margin-top: 10px;
}

.equip-composites h2,
.equip-materials h2,
.god-equip-info h2 {
  color: #00a383;
  margin-bottom: 15px;
  font-size: 24px;
  padding-top: 20px;
  text-align: center;
}

.god-equip-info p {
  text-align: center;
  font-size: 16px;
  color: #ccc;
  margin: 10px 0;
}

/* 可合成装备 */
.composite-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.composite-item {
  display: flex;
  gap: 30px;
  padding: 15px;
  background: rgba(0, 163, 131, 0.1);
  border-radius: 10px;
  align-items: center;
}

.composite-equip {
  display: flex;
  gap: 15px;
  align-items: center;
  flex: 1;
}

.composite-equip img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 2px solid #00a383;
  border-radius: 5px;
}

.composite-equip-info h3 {
  color: #00a383;
  margin: 0 0 10px 0;
}

.synthesis-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.material {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.material img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border: 1px solid #00a383;
  border-radius: 5px;
}

.plus {
  font-size: 24px;
  color: #00a383;
  font-weight: bold;
}

/* 合成材料 */
.materials-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: rgba(0, 163, 131, 0.1);
  border-radius: 10px;
  justify-content: center;
}

.material-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.material-item img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border: 2px solid #00a383;
  border-radius: 5px;
}

.material-details {
  text-align: center;
}

.material-details h3 {
  color: #00a383;
  margin: 0 0 5px 0;
}

@media (max-width: 768px) {
  .equip-main {
    flex-direction: column;
  }
  
  .equip-image img {
    width: 150px;
    height: 150px;
  }
  
  .equip-info {
    text-align: center;
  }
  
  .composite-item {
    flex-direction: column;
  }
  
  .synthesis-info {
    flex-direction: column;
  }
  
  .materials-info {
    flex-direction: column;
  }
  
  .plus {
    transform: rotate(90deg);
  }
}
</style>
